<template>
  <div class="departments app-container">
    <el-card class="box-card">
      <el-tabs value="first">
        <el-tab-pane label="组织架构" name="first">
          <template>
            <treetools :tree-node="companyStr" :is-root="true" @showdialog="showdialog" />
          </template>
        </el-tab-pane>
        <hr>
        <el-tree :data="jiedata" :props="defaultProps" :default-expand-all="true" :expand-on-click-node="false">
          <template slot-scope="scope">
            <!-- 数状结构 -->
            <treetools :tree-node="scope.data" @showdialog="showdialog" @delDepartment="delDepartment" />
          </template>
        </el-tree>
      </el-tabs>
    </el-card>
    <!-- 弹窗 -->
    <depDialog :department-obj="treeid" :dialog-visible.sync="dialogVisible" @addOrCompileOk="addOrCompileOk" />
  </div>
</template>

<script>
// 树状结构组件
import treetools from './components/tree-tools.vue'
// 弹窗组件
import depDialog from './components/depDialog.vue'
import { getDepartmentList } from '@/api/department'
import { mapGetters } from 'vuex'
export default {
  components: {
    treetools,
    depDialog
  },
  data() {
    return {
      // 树状结构数据
      treeid: {},
      // 模态框
      dialogVisible: false,

      // 公司结构数据
      companyStr: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 部门树状结构
      jiedata: [

      ],
      // 树状结构的显示条件
      defaultProps: {
        label: 'name',
        children: 'children'
      }

    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    // 获取数据
    this.init()
  },
  methods: {
    // 新增或编辑刷新数据
    addOrCompileOk() {
      this.dialogVisible = false
      this.init()
    },
    // 删除后刷新数据
    delDepartment() {
      this.init()
    },
    // 封装获取树状结构数据
    async init() {
      // 获取数据
      const res = await getDepartmentList()
      this.jiedata = this.listTotreeDada(res.depts, '')
    },
    // 改造树状结构数据递归工具函数
    listTotreeDada(list, id) {
      const res = []
      list.forEach(el => {
        if (el.pid === id) {
          el.children = this.listTotreeDada(list, el.id)
          res.push(el)
        }
      })
      return res
    },

    // 打开新增或编辑模态框
    showdialog(obj) {
      this.dialogVisible = true
      this.treeid = obj
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content{
  padding:25px 100px 0;
  font-size: 15px;
}
.grid-content{
  font-size: 15px;
}

</style>
